<template>
  <div class="dashboard" v-loading="loading" element-loading-text="加载中...">
    <InfoTop :data-info="dataInfo" :info-data="infoData" @refresh="refresh" />

    <InfoCenter
      :line-x-axis-data="lineXAxisData"
      :line-series-data="lineSeriesData"
      :MonthAndDayWorkOrdersCountData="MonthAndDayWorkOrdersCountData"
      :table-data="tableData"
    />

    <InfoBottom
      :bar-x-axis-data="barXAxisData"
      :bar-series-data="barSeriesData"
      :dir-x-axis-data="dirXAxisData"
      :dir-series-data="dirSeriesData"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
// import LineBar from "@/components/echarts/lineBar.vue";
import InfoTop from "./components/InfoTop.vue";
import InfoCenter from "./components/Center.vue";
import InfoBottom from "./components/Bottom.vue";

import {
  getWeekWorkOrdersCount,
  getEchartsData,
  getMonthAndDayWorkOrdersCount,
  getWorkOrdersMonthCountByIdc,
  getWorkOrderList,
  getWorkOrdersMonthCount,
} from "./services";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();

const infoData = ref([]);

const tableData = ref([]);

const dataInfo = ref({
  weekOrders: 0,
  weekComparison: "",
  total: 10,
  dayComparison: "",
});

const MonthAndDayWorkOrdersCountData = ref({
  day_count: 0,
  month_count: 0,
});

// y轴
const lineXAxisData = ref([]);

// 折线图
const lineSeriesData = ref([]);

const barXAxisData = ref([]);
const barSeriesData = ref([]);

const loading = ref(false);

onMounted(() => {
  loading.value = true;
  try {
    requestWeekWorkOrdersCount();
    requestEchartsData();
    requestMonthAndDayWorkOrdersCount();
    requestWorkOrdersMonthCountByIdc();
    fetchTableData();
    requestgetWorkOrdersMonthCount();
  } finally {
    loading.value = false;
  }
});

const requestWeekWorkOrdersCount = async () => {
  try {
    const res = await getWeekWorkOrdersCount();
    dataInfo.value = res.data;
  } catch (error) {}
};

const requestEchartsData = async () => {
  try {
    const res = await getEchartsData();
    infoData.value = res.data.map((item) => {
      return {
        ...item,
        percentage: Number(item.percentage.replace("%", "")),
      };
    });
  } catch (error) {}
};

// 获取本月和今天工单数
const requestMonthAndDayWorkOrdersCount = async () => {
  try {
    const res = await getMonthAndDayWorkOrdersCount();
    MonthAndDayWorkOrdersCountData.value = res.data;
  } catch (error) {}
};

// bottom echarts
const requestWorkOrdersMonthCountByIdc = async () => {
  try {
    const res = await getWorkOrdersMonthCountByIdc();
    // 处理数据
    const rawData = res.data || [];
    barXAxisData.value = rawData.map((item) => item.month);
    barSeriesData.value = [
      {
        name: "督办工单数",
        type: "bar",
        data: rawData.map((item) => item.order_count),
      },
    ];
  } catch (error) {}
};

// 获取表格数据
const fetchTableData = async () => {
  try {
    let params = {
      pageNum: 1,
      pageSize: 20,
      departmentId: userStore.dept.deptId,
    };

    const res = await getWorkOrderList(params);
    tableData.value = res.rows || [];
  } catch (error) {}
};

// 折线图
const requestgetWorkOrdersMonthCount = async () => {
  try {
    const res = await getWorkOrdersMonthCount();
    const raw = res.data || {};
    const keys = Object.keys(raw);
    if (keys.length > 0) {
      lineXAxisData.value = raw[keys[0]].map((item) => item.month);
      lineSeriesData.value = keys.map((key) => ({
        name: key,
        type: "line",
        data: raw[key].map((item) => item.order_count),
      }));
    }
  } catch (error) {}
};

const refresh = () => {
  fetchTableData();
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.my-loading-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #409eff;
}
</style>
